<!DOCTYPE html>
<html>

<head>
    <title>首页</title>
    <meta charSet="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta httpEquiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="demo" />
    <meta name="description" content="demo" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="dist/css/_common.css">
    <link rel="stylesheet" type="text/css" href="dist/css/style.css">
    <script type="text/javascript" src="dist/js/lib/viewport/viewport.js"></script>
</head>

<body>
    <div class="cloud-wraper">
        <div class="cloud-top fn-clear">
            <div class="top-rt">
                <i class="all-screem fullscreen"></i>
                <span>全屏</span>
                <i class="rt-lines"></i>
                <i class="quit-sys"></i>
                <span>退出</span>
            </div>
        </div>
        <!-- content start -->
        <div class="cloud-cons fn-clear">
            <div class="cloud-lf-cons">
                <div class="gfleft-wraper">
                    <div class="gfleft-up">
                        <div class="gf-title">
                            <i class="gf-icon1"></i>
                            <h3>云胶片访问情况</h3>
                        </div>
                        <div class="gfup-cont">
                            <div class="gf-bar">
                                <i class="gf-icon2"></i>
                                <div class="gf-box1">
                                    <em class="num11 nnum">34343</em>
                                    <p>电子胶片访问量</p>
                                </div>
                                <i class="v-line"></i>
                                <div class="gf-box2">
                                    <em class="num22 nnum">34343</em>
                                    <p>当日电子胶片访问量</p>
                                </div>
                            </div>
                            <div class="gf-bar">
                                <i class="gf-icon3"></i>
                                <div class="gf-box1">
                                    <em style="color: #7AC545;" class="num33 nnum">34343</em>
                                    <p>授权分享访问量</p>
                                </div>
                                <i class="v-line"></i>
                                <div class="gf-box2">
                                    <em style="color: #7AC545;" class="num44 nnum">34343</em>
                                    <p>当日授权分享访问量</p>
                                </div>
                            </div>
                            <div class="gf-bar">
                                <i class="gf-icon4"></i>
                                <div class="gf-box1">
                                    <em style="color: #7AC545;" class="num55 nnum">34343</em>
                                    <p>图文报告访问量</p>
                                </div>
                                <i class="v-line"></i>
                                <div class="gf-box2">
                                    <em style="color: #7AC545;" class="num66 nnum">34343</em>
                                    <p>当日图文报告访问量</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="gfleft-down">
                        <div class="gf-title">
                            <i></i>
                            <h3>患者动态信息</h3>
                            <p>查看详情 >></p>
                        </div>
                        <ul class="gfdown-cont">
                            <li class="gf-header1">
                                <h4 class="gf-name">姓名</h4>
                                <h4 class="gf-types">检查类型</h4>
                                <h4 class="gf-time1">检查时间</h4>
                                <h4 class="gf-time2">报告时间</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header2">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                            <li class="gf-header3">
                                <h4 class="gf-name">张三才</h4>
                                <h4 class="gf-types">CT</h4>
                                <h4 class="gf-time1">2019.9.23 14:30</h4>
                                <h4 class="gf-time2">2019.9.23 14:30</h4>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="cloud-rt-cons">
                <div class="wyg-content">
                    <div class="section1">
                        <div class="public-header  fn-clear">
                            <i></i>
                            <span>检查设备占比</span>
                        </div>
                        <div id="echarts1"></div>
                        <div class="text">
                            <ul>
                                <li>CT<em>561</em>次</li>
                                <li>MR<em>343</em>次</li>
                                <li>DX<em>343</em>次</li>
                                <li>CR<em>343</em>次</li>
                                <li>MG<em>343</em>次</li>
                                <li>RF<em>343</em>次</li>
                            </ul>
                        </div>
                    </div>
                    <div class="section2">
                        <div class="public-header">
                            <i></i>
                            <span>统计检查量</span>
                            <div class="date">
                                <ul>
                                    <li class="active">按月</li>
                                    <li>按日</li>
                                </ul>
                            </div>
                        </div>
                        <div id="echarts2"></div>
                    </div>
                    <div class="section3">
                        <div class="public-header fn-clear">
                            <i></i>
                            <span>流量趋势</span>
                            <div class="date">
                                <ul>
                                    <li class="active">今天</li>
                                    <li>7天</li>
                                    <li>30天</li>
                                </ul>
                            </div>
                        </div>
                        <div id="echarts3"></div>
                    </div>
                </div>
            </div>
            <div class="cloud-mid-cons">
                <div class="cloud-mid-top">
                    <div class="mid-top-cons">
                        <div class="cons-header fn-clear">
                            <div class="cons-header-lf">
                                <div class="total-num">
                                    <p>当前用户累计总量</p>
                                </div>
                                <div class="bd">
                                    <ul>
                                        <li>
                                            <div id="data-numlf" class="data-numlf">
                                                <div class="data-numlf1"></div>
                                                <div class="data-numlf2"></div>
                                                <div class="data-numlf3"></div>
                                                <div class="data-numlf4"></div>
                                                <div class="data-numlf5"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="cons-header-rt">
                                <div class="total-num add-num">
                                    <p>当日新增用户总量</p>
                                </div>
                                <div class="bd">
                                    <ul>
                                        <li>
                                            <div id="data-numrt" class="data-numrt">
                                                <div class="data-numrt1"></div>
                                                <div class="data-numrt2"></div>
                                                <div class="data-numrt3"></div>
                                                <div class="data-numrt4"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="cons-tit">
                            <i class="data-icon"></i>
                            <p>2019年09月08 星期二</p>
                        </div>
                        <div class="cons-main">
                            <div class="map-top">
                                <i class="hos-center"></i>
                                <p>云胶片存储中心</p>
                            </div>
                            <div class="echarts-map" id="echarts-map"></div>
                        </div>
                    </div>
                </div>
                <div class="cloud-mid-bot">
                    <ul>
                        <li>
                            <i class="li-icon1"></i>
                            <div class="li-rt">
                                <div class="li-rt-top">
                                    <div id="data-num1" class="data-num1"> </div>
                                    <span>累计检查量</span>
                                </div>
                                <div class="li-rt-top">
                                    <div id="data-num2" class="data-num1 data-num2"> </div>
                                    <span>当日新增检查量</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <i class="li-icon2"></i>
                            <div class="li-rt">
                                <div class="li-rt-top">
                                    <div id="data-num3" class="data-num1 data-num3"> </div>
                                    <span>累计存储量</span>
                                </div>
                                <div class="li-rt-top">
                                    <div id="data-num4" class="data-num1 data-num4"> </div>
                                    <span>当日新增存储量</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <i class="li-icon3"></i>
                            <div class="li-rt">
                                <div class="li-rt-top">
                                    <div id="data-num5" class="data-num1 data-num5"> </div>
                                    <span>累计访问量</span>
                                </div>
                                <div class="li-rt-top">
                                    <div id="data-num6" class="data-num1 data-num6"> </div>g
                                    <span>当日新增访问量</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- content end -->
    </div>
    <script src="dist/js/lib/jquery/jquery-1.11.3.min.js"></script>
    <script src="dist/js/lib/backstretch/jquery.backstretch.min.js"></script>
    <script src="dist/js/lib/superSlide/jquery.SuperSlide.2.1.1.js"></script>
    <script src="dist/js/lib/echarts/echarts4.js"></script>
    <script src="dist/js/lib/echarts/dongguan.js"></script>
    <script src="dist/js/lib/DigitalScroll20161106/js/count.js"></script>
    <script>
        $(function() {
            $(".num11").numberRock({
                speed: 10,
                count: 34343
            })
            $(".num22").numberRock({
                speed: 10,
                count: 34343
            })
            $(".num33").numberRock({
                speed: 10,
                count: 34343
            })
            $(".num44").numberRock({
                speed: 10,
                count: 34343
            })
            $(".num55").numberRock({
                speed: 10,
                count: 34343
            })
            $(".num66").numberRock({
                speed: 10,
                count: 34343
            })
            // 
            $(".data-num1").numberRock({
                speed: 10,
                count: 34343
            })
            $(".data-num2").numberRock({
                speed: 10,
                count: 34343
            })
            $(".data-num3").numberRock({
                speed: 10,
                count: 34343
            })
            $(".data-num4").numberRock({
                speed: 10,
                count: 34343
            })
            $(".data-num5").numberRock({
                speed: 10,
                count: 34343
            })
            $(".data-num6").numberRock({
                speed: 10,
                count: 34343
            })
            // up num
            $(".data-numlf1").numberRock({
                speed: 10,
                count: 1
            })
            $(".data-numlf2").numberRock({
                speed: 10,
                count: 7
            })
            $(".data-numlf3").numberRock({
                speed: 10,
                count: 6
            })
            $(".data-numlf4").numberRock({
                speed: 10,
                count: 8
            })
            $(".data-numlf5").numberRock({
                speed: 10,
                count: 8
            })
            // 
            $(".data-numrt1").numberRock({
                speed: 10,
                count: 1
            })
            $(".data-numrt2").numberRock({
                speed: 10,
                count: 7
            })
            $(".data-numrt3").numberRock({
                speed: 10,
                count: 6
            })
            $(".data-numrt4").numberRock({
                speed: 10,
                count: 8
            })

            $('body').backstretch(['dist/img/background-img.png']);
            var clientWidth = document.documentElement.scrollWidth; //获取屏幕尺寸
            var scale = clientWidth / 1440; //缩放比例
            // right click
            $('.date li').click(function() {
                $(this).addClass('active').siblings().removeClass('active')
            })




            // 全屏
            var fullscreen = function() {
                elem = document.body;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                } else {
                    //浏览器不支持全屏API或已被禁用
                }
            }
            var exitFullscreen = function() {
                var elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                } else {
                    //浏览器不支持全屏API或已被禁用
                }
            };

            $(function() {
                // 点击全屏
                $('.fullscreen').on('click', function(event) {
                    event.preventDefault();
                    /* Act on the event */
                    if ($(this).hasClass('full') == false) {
                        fullscreen()
                        $(this).addClass('full')
                        $(this).children('span').text('退出全屏')
                    } else {
                        exitFullscreen()
                        $(this).removeClass('full')
                        $(this).children('span').text('全屏')
                    }
                });
            });
            // echarts
            var myChart = echarts.init(document.getElementById('echarts-map'));
            var chinaGeoCoordMap = {
                '东城街道': [113.789745, 23.034095],
                '万江街道': [113.744808, 23.052905],
                '望牛墩镇': [113.662328, 23.061813],
                '莞城街道': [113.755571, 23.045347],
                '道滘镇': [113.68167, 23.010235],
                '常平镇': [113.998921, 22.981577],
                '南城街道': [113.745342, 23.00623],
                '厚街镇': [113.677087, 22.942053],
                '樟木头镇': [114.089719, 22.92077],
                '虎门镇': [113.678872, 22.820851],
                '长安镇': [113.808855, 22.821128],
                '大朗镇': [113.950525, 22.946169],
                '黄江镇': [114.009998, 22.922025],
                '塘厦镇': [114.079051, 22.81293],
                '凤岗镇': [114.143179, 22.753248],
                '清溪镇': [114.171051, 22.850317],
                '谢岗镇': [114.155191, 22.967567],
                '桥头镇': [114.110968, 23.030233],
                '石龙镇': [113.880838, 23.112166],
                '石碣镇': [113.819675, 23.105471],
                '高埗镇': [113.752157, 23.097952],
                '中堂镇': [113.663624, 23.098774],
                '洪梅镇': [113.61551, 23.00111],
                '麻涌镇': [113.58796, 23.056822],
                '沙田镇': [113.624651, 22.925701],
                '茶山镇': [113.876358, 23.083319],
                '企石镇': [114.028973, 23.079075],
                '横沥镇': [113.972248, 23.024481],
                '寮步镇': [113.881138, 23.003735],
                '东坑镇': [113.940211, 23.001534],
                '石排镇': [113.946909, 23.09603],
                '大岭山镇': [113.849049, 22.906067]
            };
            var chinaDatas = [
                [{
                    name: '东城街道',
                    value: 1.8
                }],
                [{
                    name: '万江街道',
                    value: 0.8
                }],
                [{
                    name: '望牛墩镇',
                    value: 0.8
                }],
                [{
                    name: '莞城街道',
                    value: 0.8
                }],
                [{
                    name: '道滘镇',
                    value: 0.8
                }],
                [{
                    name: '常平镇',
                    value: 0.8
                }],
                [{
                    name: '南城街道',
                    value: 0.8
                }],
                [{
                    name: '厚街镇',
                    value: 0.8
                }],
                [{
                    name: '樟木头镇',
                    value: 0.8
                }],
                [{
                    name: '虎门镇',
                    value: 0.8
                }],
                [{
                    name: '长安镇',
                    value: 0.8
                }],
                [{
                    name: '大朗镇',
                    value: 0.8
                }],
                [{
                    name: '黄江镇',
                    value: 0.8
                }],
                [{
                    name: '塘厦镇',
                    value: 0.8
                }],
                [{
                    name: '凤岗镇',
                    value: 0.8
                }],
                [{
                    name: '清溪镇',
                    value: 0.8
                }],
                [{
                    name: '谢岗镇',
                    value: 0.8
                }],
                [{
                    name: '桥头镇',
                    value: 0.8
                }],
                [{
                    name: '石龙镇',
                    value: 0.8
                }],
                [{
                    name: '石碣镇',
                    value: 0.8
                }],
                [{
                    name: '高埗镇',
                    value: 0.8
                }],
                [{
                    name: '中堂镇',
                    value: 0.8
                }],
                [{
                    name: '洪梅镇',
                    value: 0.8
                }],
                [{
                    name: '麻涌镇',
                    value: 0.8
                }],
                [{
                    name: '沙田镇',
                    value: 0.8
                }],
                [{
                    name: '茶山镇',
                    value: 0.8
                }],
                [{
                    name: '企石镇',
                    value: 0.8
                }],
                [{
                    name: '横沥镇',
                    value: 0.8
                }],
                [{
                    name: '寮步镇',
                    value: 0.8
                }],
                [{
                    name: '东坑镇',
                    value: 0.8
                }],
                [{
                    name: '石排镇',
                    value: 0.8
                }],
                [{
                    name: '大岭山镇',
                    value: 0.8
                }],
            ];
            var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = chinaGeoCoordMap[dataItem[0].name];
                    var toCoord = [114.29538, 23.21016];
                    if (fromCoord && toCoord) {
                        res.push([{
                            coord: fromCoord,
                            value: dataItem[0].value
                        }, {
                            coord: toCoord,
                        }]);
                    }
                }
                return res;
            };
            var series = [];
            [
                ['云胶片存储中心', chinaDatas]
            ].forEach(function(item, i) {
                console.log(item)
                series.push({
                    type: 'lines',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'circle', //箭头图标 arrow
                        symbolSize: 5, //图标大小
                        color: '#7ED321',
                    },
                    lineStyle: {
                        normal: {
                            width: 1, //尾迹线条宽度
                            opacity: 1, //尾迹线条透明度
                            curveness: .3, //尾迹线条曲直度
                            color: '#7ED321',
                        }
                    },
                    data: convertData(item[1])
                }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: { //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 3 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function(params) { //圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 6 * scale,
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: 'circle',
                    symbolSize: function(val) {
                        return 3 + val[2] * 2; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                            color: '#7ED321'
                        }
                    },
                    data: item[1].map(function(dataItem) {
                        return {
                            name: dataItem[0].name,
                            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                        };
                    }),
                }, );
            });

            var optionecharts_four = {
                geo: {
                    map: '东莞',
                    roam: false, //滚轮缩放平移关闭
                    selectedMode: "single",
                    zoom: 0.94,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12 * scale,
                                fontFamily: 'Microsoft Yahei'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 6 * scale,
                                // fontWeight: 'bold'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#2bbaeb',
                            borderColor: '#fff',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#1a6bd7',
                            borderColor: '#8bfffe',
                            borderWidth: 2 * scale
                        }
                    }
                },
                series: series
            };
            // right echarts
            var myChart1 = echarts.init(document.getElementById('echarts1'));
            var option1 = {
                series: [{
                    type: 'pie',
                    radius: [25, 90],
                    center: ['50%', '40%'],
                    roseType: 'area',
                    label: {
                        normal: {
                            formatter: '{a|{d}}{a|%}\n{a|{b}}',

                            rich: {
                                a: {
                                    color: '#fff',
                                    fontSize: 14 * scale,
                                    align: 'center',
                                    verticalAlign: 'bottom',
                                },
                                b: {
                                    fontSize: 14 * scale,
                                    fontFamily: 'reducto_condensed_ssiCn',
                                    color: '#fff',
                                },
                            }
                        }
                    },
                    labelLine: {
                        length: -20 * scale,
                        length2: 10 * scale,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: [{
                        value: 25,
                        name: 'CT',
                        itemStyle: {
                            color: 'rgba(43,186,235)',
                        }
                    }, {
                        value: 23,
                        name: 'MR',
                        itemStyle: {
                            color: 'rgba(101,195,207)'
                        }
                    }, {
                        value: 40,
                        name: 'DX',
                        itemStyle: {
                            color: 'rgba(250,79,76)'
                        }
                    }, {
                        value: 18,
                        name: 'CR',
                        itemStyle: {
                            color: 'rgba(86,68,96)'
                        }
                    }, {
                        value: 20,
                        name: 'MG',
                        itemStyle: {
                            color: 'rgba(244,166,0)'
                        }
                    }, {
                        value: 25,
                        name: 'RF',
                        itemStyle: {
                            color: 'rgba(120,199,59)'
                        }
                    }, ]
                }]
            };
            var myChart2 = echarts.init(document.getElementById('echarts2'));
            option2 = {
                tooltip: {},
                grid: {
                    top: '20%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true,
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#00AAE0'
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', ],
                }],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 7,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    name: '注册总量',
                    type: 'line',
                    // smooth: true, //是否平滑曲线显示
                    // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 6,
                    lineStyle: {
                        normal: {
                            color: "#69C871", // 线条颜色
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#28ffb3",

                        }
                    },
                    tooltip: {
                        show: false
                    },
                    data: [528, 854, 908, 967, 1528, 1228, 1549]
                }, {
                    type: 'bar',
                    barWidth: 20,
                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        color: '#2DB0EB'
                    },
                    data: [328, 554, 628, 678, 928, 930, 1349]
                }]
            };
            var myChart3 = echarts.init(document.getElementById('echarts3'));
            option3 = {
                tooltip: {},
                grid: {
                    top: '20%',
                    left: '0%',
                    right: '1%',
                    bottom: '0%',
                    containLabel: true,
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#00AAE0'
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ['0时', '0时', '3时', '6时', '9时', '11时', '2时', '5时', '8时', '0时'],
                }],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 7,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    type: 'line',
                    // smooth: true, //是否平滑曲线显示
                    // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                    showAllSymbol: true,
                    hoverAnimation: true,
                    symbol: 'emptyCircle',
                    symbolSize: 6,
                    lineStyle: {
                        normal: {
                            color: "#69C871", // 线条颜色
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#F5A623 ",
                        }
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(105,200,113,1)'
                            }, {
                                offset: 1,
                                color: 'rgba(103,125,125, 0.1)'
                            }], false),
                            shadowColor: 'rgba(105,200,113,1)', //阴影颜色
                            shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    tooltip: {
                        show: false
                    },
                    data: [0, 528, 854, 908, 967, 1528, 1228, 1603, 1549, 0, ]
                }]
            };
            myChart.setOption(optionecharts_four);
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            $(window).resize(function() {
                myChart.resize();
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
            });
            setInterval(function() {
                $(".num11").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".num22").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".num33").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".num44").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".num55").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".num66").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num1").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num2").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num3").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num4").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num5").numberRock({
                    speed: 10,
                    count: 34343
                })
                $(".data-num6").numberRock({
                    speed: 10,
                    count: 34343
                })
                // up num
                $(".data-numlf1").numberRock({
                    speed: 10,
                    count: 1
                })
                $(".data-numlf2").numberRock({
                    speed: 10,
                    count: 7
                })
                $(".data-numlf3").numberRock({
                    speed: 10,
                    count: 6
                })
                $(".data-numlf4").numberRock({
                    speed: 10,
                    count: 8
                })
                $(".data-numlf5").numberRock({
                    speed: 10,
                    count: 8
                })
                // 
                $(".data-numrt1").numberRock({
                    speed: 10,
                    count: 1
                })
                $(".data-numrt2").numberRock({
                    speed: 10,
                    count: 7
                })
                $(".data-numrt3").numberRock({
                    speed: 10,
                    count: 6
                })
                $(".data-numrt4").numberRock({
                    speed: 10,
                    count: 8
                })
                myChart1.clear();
                myChart1.setOption(option1);
                myChart2.clear();
                myChart2.setOption(option2);
                myChart3.clear();
                myChart3.setOption(option3);
            }, 10000);

        })
    </script>
</body>

</html>